<template>
  <div>
    <h3>parent</h3>
    <Child
      name="李华"
      :age="20"
      :hobby="hobby"
      :address="address"
      @myevent="getVal"
    ></Child>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import Child from './09.child.vue'

const hobby = ref(['听歌', '玩游戏', '篮球'])
const address = ref({ province: '广东', city: '东莞' })
const getVal = newVal => {
  hobby.value = newVal
}

//跨级组件传值  父组件传给子孙组件
const money = ref(1000000000)
provide('money', money)
//父组件函数传递给子孙组件
const fn = val => {
  console.log(val)
}
provide('fn', fn)
</script>

<style scoped></style>
